<template>
  <div>
    <el-row>
      <el-col :span="2"><div>姓名</div></el-col>
      <el-col :span="4"
        ><div>
          <el-input
            v-model="name"
            placeholder="请输入内容"
            size="mini"
          ></el-input></div
      ></el-col>
      <el-col :span="2"><div>部门</div></el-col>
      <el-col :span="6">
        <div>
          <el-select v-model="department" placeholder="请选择" size="mini">
            <el-option
              v-for="item in Department"
              :key="item.Id"
              :label="item.Department_Name"
              :value="item.Id"
            >
            </el-option>
          </el-select></div
      ></el-col>
      <el-col :span="2"><div>职位</div></el-col>
      <el-col :span="6"
        ><div>
          <el-select v-model="position" placeholder="请选择" size="mini">
            <el-option
              v-for="item in Position"
              :key="item.Id"
              :label="item.Position_Name"
              :value="item.Id"
            >
            </el-option>
          </el-select></div
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="2"><div>入职日期</div></el-col>
      <el-col :span="4"
        ><div>
          <el-input
            v-model="date"
            type="date"
            placeholder="请输入内容"
            size="mini"
          ></el-input></div
      ></el-col>
      <el-col :span="2"><div>申请日期</div></el-col>
      <el-col :span="6">
        <div>
          <el-input
            v-model="dates"
            type="dates"
            placeholder="请输入内容"
            size="mini"
          ></el-input></div
      ></el-col>
      <el-col :span="2"><div>审批状态</div></el-col>
      <el-col :span="6"
        ><div>
          <el-select v-model="state" placeholder="请选择活动区域" size="mini">
            <el-option label="待提交" value="1"></el-option>
            <el-option label="待审批" value="2"></el-option>
            <el-option label="已同意" value="3"></el-option>
            <el-option label="已拒绝" value="4"></el-option>
          </el-select></div
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="2"><div></div></el-col>
      <el-col :span="4"><div></div></el-col>
      <el-col :span="2"><div></div></el-col>
      <el-col :span="4"> <div></div></el-col>
      <el-col :span="4"><div></div></el-col>
      <el-col :span="4"
        ><div>
          <el-button size="mini" type="primary" @click="GetShow">查询</el-button
          ><el-button size="mini" @click="Reset">重置</el-button>
        </div></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="4"
        ><div>
          <el-button type="primary" @click="dialogFormVisible = true"
            >添加</el-button
          >
          <el-button type="primary" @click="DelEmployees">删除</el-button>
        </div></el-col
      >
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="Department_Name" label="部门" width="180">
      </el-table-column>
      <el-table-column prop="Position_Name" label="职位" width="180">
      </el-table-column>
      <el-table-column prop="names" label="上级负责人" width="180">
      </el-table-column>
      <el-table-column prop="Positive_InductionDates" label="入职日期" width="180">
      </el-table-column>
      <el-table-column prop="Positive_Dates" label="申请日期" width="180">
      </el-table-column>
      <el-table-column prop="Positive_DateTimes" label="创建时间" width="180">
      </el-table-column>
      <el-table-column label="审批状态" width="180">
        <template slot-scope="scope">
          {{
            scope.row.Positive_State == 1
              ? "待提交"
              : scope.row.Positive_State == 2
              ? "待审批"
              : scope.row.Positive_State == 3
              ? "已同意"
              : "已拒绝"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="namess" label="审批人" width="180">
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="310">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
          <el-button size="mini" @click="chakan(scope.row)">查看</el-button>
          <el-button size="mini" @click="tijiao(scope.row)">重新提交</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalcount"
    >
    </el-pagination>

    <el-dialog title="新增转正" :visible.sync="dialogFormVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="部门" prop="Department_Id">
          <el-select
            v-model="ruleForm.Department_Id"
            placeholder="请选择"
            size="mini"
            @change="GetPositions"
          >
            <el-option
              v-for="item in Department"
              :key="item.Id"
              :label="item.Department_Name"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="Position_Id">
          <el-select
            v-model="ruleForm.Position_Id"
            placeholder="请选择"
            size="mini"
            @change="GetPersonnel"
          >
            <el-option
              v-for="item in Positions"
              :key="item.Id"
              :label="item.Position_Name"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工姓名" prop="Employees_Id">
          <el-select
            v-model="ruleForm.Employees_Id"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in Personnel"
              :key="item.Id"
              :label="item.Employees_Name"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级负责人" prop="SuperiorResponsiblePerson">
          <el-select
            v-model="ruleForm.SuperiorResponsiblePerson"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in Employees"
              :key="item.Id"
              :label="item.Employees_Name"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职日期" prop="Positive_InductionDate">
          <el-date-picker
            v-model="ruleForm.Positive_InductionDate"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
         <el-form-item label="申请日期日期" prop="Positive_Date">
          <el-date-picker
            v-model="ruleForm.Positive_Date"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="试用期工作总结" prop="Positive_Conclusion">
          <el-input
            type="textarea"
            v-model="ruleForm.Positive_Conclusion"
          ></el-input>
        </el-form-item>
        <el-form-item label="对公司的意见和建议" prop="Positive_Advice">
          <el-input
            type="textarea"
            v-model="ruleForm.Positive_Advice"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >创建</el-button
          >
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="编辑转正" :visible.sync="dialogFormVisibles">
      <el-form
        :model="ruleForms"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="部门" prop="Department_Id">
          <el-select
            v-model="ruleForms.Department_Id"
            placeholder="请选择"
            size="mini"
            @change="GetPositionss"
          >
            <el-option
              v-for="item in Department"
              :key="item.Id"
              :label="item.Department_Name"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="Position_Id">
          <el-select
            v-model="ruleForms.Position_Id"
            placeholder="请选择"
            size="mini"
            @change="GetPersonnels"
          >
            <el-option
              v-for="item in Positions"
              :key="item.Id"
              :label="item.Position_Name"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工姓名" prop="Employees_Id">
          <el-select
            v-model="ruleForms.Employees_Id"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in Personnels"
              :key="item.Id"
              :label="item.Employees_Name"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级负责人" prop="SuperiorResponsiblePerson">
          <el-select
            v-model="ruleForms.SuperiorResponsiblePerson"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in Employeess"
              :key="item.Id"
              :label="item.Employees_Name"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职日期" prop="Positive_InductionDate">
          <el-date-picker
            v-model="ruleForms.Positive_InductionDate"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
         <el-form-item label="申请日期日期" prop="Positive_Date">
          <el-date-picker
            v-model="ruleForms.Positive_Date"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="试用期工作总结" prop="Positive_Conclusion">
          <el-input
            type="textarea"
            v-model="ruleForms.Positive_Conclusion"
          ></el-input>
        </el-form-item>
        <el-form-item label="对公司的意见和建议" prop="Positive_Advice">
          <el-input
            type="textarea"
            v-model="ruleForms.Positive_Advice"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForms('ruleForm')"
            >创建</el-button
          >
          <el-button @click="dialogFormVisibles = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="查看" :visible.sync="dialogFormVisibless">
      <el-form
        :model="ruleFormss"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="部门" prop="Department_Id">
          <el-input
            v-model="ruleFormss.Department_Name"
            placeholder="请输入内容"
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="Position_Id">
          <el-input
            v-model="ruleFormss.Position_Name"
            placeholder="请输入内容"
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工姓名" prop="Employees_Id">
          <el-input
            v-model="ruleFormss.name"
            placeholder="请输入内容"
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="上级负责人" prop="SuperiorResponsiblePerson">
          <el-input
            v-model="ruleFormss.names"
            placeholder="请输入内容"
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="入职日期" prop="Positive_InductionDate">
          <el-date-picker
            v-model="ruleFormss.Positive_InductionDate"
            type="date"
            placeholder="选择日期"
            readonly="readonly"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申请日期日期" prop="Positive_Date">
          <el-date-picker
            v-model="ruleFormss.Positive_Date"
            type="date"
            placeholder="选择日期"
            readonly="readonly"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="试用期工作总结" prop="Positive_Conclusion">
          <el-input
            type="textarea"
            v-model="ruleFormss.Positive_Conclusion"
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="对公司的意见和建议" prop="Positive_Advice">
          <el-input
            type="textarea"
            v-model="ruleFormss.Positive_Advice"
            readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisibless = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      pagesize: 5,
      pageindex: 1,
      totalcount: 0,
      multipleSelection: [],
      ids: [],
      Department: [],
      Position: [],
      Positions: [],
      PositionsS: [],
      Employees: [],
      Employeess: [],
      Personnel: [],
      Personnels: [],
      name: "",
      department: "",
      position: "",
      date: "",
      dates: "",
      state: "",
      dialogFormVisible: false,
      dialogFormVisibles: false,
      dialogFormVisibless: false,
      ruleForm: {},
      ruleForms: {},
      ruleFormss: {},
      rules: {},
    };
  },
  methods: {
    GetShow() {
      this.$axios
        .get(
          "https://localhost:44360/api/app/t-mS_Positive/positive?&name=" +
            this.name +
            "&department=" +
            this.department +
            "&position=" +
            this.position +
            "&date=" +
            this.date +
            "&dates=" +
            this.dates +
            "&state=" +
            this.state +
            "&pageindex=" +
            this.pageindex +
            "&pagesize=" +
            this.pagesize
        )
        .then((res) => {
          this.tableData = res.data.PageData;
          this.totalcount = res.data.PageTotal;
        });
    },
    //上级负责人
    GetEmployees() {
      this.$axios
        .get("https://localhost:44360/api/app/t-mS_Induction/employees")
        .then((res) => {
          this.Employees = res.data;
        });
    },
    GetEmployeess() {
      this.$axios
        .get("https://localhost:44360/api/app/t-mS_Induction/employees")
        .then((res) => {
          this.Employeess = res.data;
        });
    },
    //员工
    GetPersonnel() {
      this.$axios
        .get(
          "https://localhost:44360/api/app/t-mS_Induction/" +
            this.ruleForm.Position_Id +
            "/employeess"
        )
        .then((res) => {
          this.Personnel = res.data;
        });
    },
    GetPersonnels() {
      this.$axios
        .get(
          "https://localhost:44360/api/app/t-mS_Induction/" +
            this.ruleForms.Position_Id +
            "/employeess"
        )
        .then((res) => {
          this.Personnels = res.data;
        });
    },
    //部门
    GetDepartment() {
      this.$axios
        .get("https://localhost:44360/api/app/t-mS_Employees-sevice/department")
        .then((res) => {
          this.Department = res.data;
        });
    },
    //职位
    GetPosition() {
      this.$axios
        .get("https://localhost:44360/api/app/t-mS_Employees-sevice/position")
        .then((res) => {
          this.Position = res.data;
        });
    },
    //职位
    GetPositions() {
      this.$axios
        .get(
          "https://localhost:44360/api/app/t-mS_Induction/" +
            this.ruleForm.Department_Id +
            "/position"
        )
        .then((res) => {
          this.Positions = res.data;
        });
    },
    GetPositionss() {
      this.$axios
        .get(
          "https://localhost:44360/api/app/t-mS_Induction/" +
            this.ruleForms.Department_Id +
            "/position"
        )
        .then((res) => {
          this.Positionss = res.data;
        });
    },
    handleEdit(row) {
      this.ruleForms = row;
      this.ruleForms.Position_Id = row.Position_Name;
      this.ruleForms.Employees_Id = row.name;
      this.dialogFormVisibles = true;
    },
    chakan(row) {
      this.ruleFormss = row;
      this.dialogFormVisibless = true;
    },
    tijiao(row) {
      this.$axios
        .put(
          "https://localhost:44360/api/app/t-mS_Positive/" + row.Id + "/state",
          this.ruleForms
        )
        .then((res) => {
          if (res.data > 0) {
            alert("提交成功");
            this.dialogFormVisibless = false;
            this.GetShow();
          } else {
            alert("提交失败");
          }
        });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete(
              "https://localhost:44360/api/app/t-mS_Positive/" +
                row.Id +
                "/positive"
            )
            .then((res) => {
              if (res.data > 0) {
                alert("删除成功");
                this.GetShow();
              } else {
                alert("删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    DelEmployees() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete(
              "https://localhost:44360/api/app/t-mS_Positive/" +
                this.ids.toString() +
                "/positive"
            )
            .then((res) => {
              if (res.data > 0) {
                alert("删除成功");
                this.GetShow();
              } else {
                alert("删除失败");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              "https://localhost:44360/api/app/t-mS_Positive/positive",
              this.ruleForm
            )
            .then((res) => {
              if (res.data > 0) {
                alert("添加成功");
                this.dialogFormVisible = false;
                this.GetShow();
              } else {
                alert("添加失败");
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitForms() {
      this.$axios
        .put(
          "https://localhost:44360/api/app/t-mS_Positive/positive",
          this.ruleForms
        )
        .then((res) => {
          if (res.data > 0) {
            alert("修改成功");
            this.dialogFormVisibles = false;
            this.GetShow();
          } else {
            alert("修改失败");
          }
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.GetShow();
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.GetShow();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelection.forEach((item) => {
        this.ids.push(item.Id);
      });
    },
    Reset() {
      this.name = "";
      this.department = "";
      this.position = "";
      this.date = "";
      this.dates = "";
      this.state = "";
    },
  },
  created() {
    this.GetShow();
    this.GetDepartment();
    this.GetPosition();
    this.GetEmployees();
    this.GetEmployeess();
  },
  computed: {},
};
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
</style>